<template>
    <div>
        <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 卡务中心 </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="container">
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-row>
                        <div class="grid-content bg-purple">
                            <el-input placeholder="请输入卡号"  v-model="query.cardId">
                                <el-button :loading="btnLoading" type="primary" slot="append" icon="el-icon-search" @click="handleSearch"
                                    >搜索</el-button
                                >             
                            </el-input>
                        </div>
                    </el-row>
                    <el-row>
                        <el-button type="primary" plain>修改等级</el-button>
                        <el-button type="primary" plain>修改门店</el-button>
                        <el-button type="primary" plain>更换卡号</el-button>
                        <el-button type="primary" plain>重置密码</el-button>
                        <el-button type="primary" plain>赠送代金券</el-button>
                        <el-button type="primary" plain>赠送积分</el-button>
                    </el-row>
                </el-col>
                <el-col :span="4" type="flex" style="text-align: center">
                    <el-avatar
                        style="width: 100px; height: 100px"
                        size="large"
                        :src="memberInfo.headImg"
                    ></el-avatar>
                    <h5 style="text-align: center">VIP会员</h5>
                </el-col>
                <el-col :span="10">
                    <el-row :gutter="20">
                        <el-col :span="10"><div class="grid-content bg-purple">微信名称:{{memberInfo.weChatName}}</div></el-col>
                        <el-col :span="10"><div class="grid-content bg-purple">姓名:{{memberInfo.fullName}}</div></el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="10"><div class="grid-content bg-purple">积分:{{memberInfo.integral}}</div></el-col>
                        <el-col :span="10"><div class="grid-content bg-purple">余额:{{memberInfo.balance}}</div></el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="10"><div class="grid-content bg-purple">手机号:{{memberInfo.mobile}}</div></el-col>
                        <el-col :span="10"><div class="grid-content bg-purple">邮箱:{{memberInfo.email}}</div></el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="10"><div class="grid-content bg-purple">性别:{{memberInfo.sex}}</div></el-col>
                        <el-col :span="10"><div class="grid-content bg-purple">注册时间:{{memberInfo.regTime}}</div></el-col>
                    </el-row>
                </el-col>
            </el-row>

            <el-tabs type="border-card">
                <el-tab-pane label="消费记录">消费记录</el-tab-pane>
                <el-tab-pane label="余额记录">余额记录</el-tab-pane>
                <el-tab-pane label="积分记录">积分记录</el-tab-pane>
                <el-tab-pane label="订单记录">订单记录</el-tab-pane>
                <el-tab-pane label="代金券记录">代金券记录</el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    // name: 'user_list',
    data() {
        return {
            query: {
                cardId: '',
                Id: 0
            },
            memberInfo: {},
            btnLoading: false,
 
            selectMenberLevel: [],
            consume: { pageIndex: 1, pageTotal: 0 },
            balance: { pageIndex: 1, pageTotal: 0 },
            integral: { pageIndex: 1, pageTotal: 0 },
            order: { pageIndex: 1, pageTotal: 0 },
            coupon: { pageIndex: 1, pageTotal: 0 },
            loading: false
        };
    },
    created() {
        // this.loading = true;
        //this.getSelect();
        this.getCardInfo();
    },
    methods: {
        
        // 触发搜索按钮
        handleSearch() {
            this.query.pageIndex = 1;
            this.getConsumeData();
        },
        getConsumeData() {
            this.loading = true;
        },
        getSelect() {
            axios({
                url: config.gatewayUrl + '/member/MemberLevel/GetMemberLevelSelect',
                method: 'post',
                headers: {
                    // 'Content-Type': 'multipart/form-data'
                }
            }).then((res) => {
                this.selectMenberLevel = res.data;
            });
        },
        getCardInfo() {
            axios({
                url: config.gatewayUrl + '/member/Member/GetCardCore?cardId=13029158689',
                method: 'get'
            }).then((res) => {
                console.log(res.data);
                if (res.data.length == 0) {
                    this.$message.error('该卡号不存在!');
                } else {
                    this.memberInfo=res.data[0];
                   
                    if(this.query.cardId=='')
                    {
                       this.query.cardId=res.data[0].cardID;
                    }
                }
            });
        },
        //消费记录分页导航
        handlePageChange(val) {
            //跳转到
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        handleSizeChange(val) {
            //改变页码
            this.query.pageSize = val;
            this.getData();
        },
        handleCurrentChange(val) {
            //下一页console.log(`当前页: ${val}`);
            this.query.pageIndex = val;
            this.getData();
        }
    },
    watch: {}
};
</script>